<template>
  <div class="app-layout min-h-screen bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <header class="app-header fixed top-0 left-0 right-0 h-16 z-1000 bg-light-bg-primary/90 dark:bg-dark-bg-primary/90 blue:bg-blue-bg-primary/90 backdrop-blur-sm border-b border-light-border dark:border-dark-border blue:border-blue-border shadow-sm transition-colors duration-300">
      <div class="header-content px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
        <!-- 左侧：Logo和菜单按钮 -->
        <div class="flex items-center">
          <button
            @click="sidebarOpen = !sidebarOpen"
            class="p-2 rounded-md text-light-text-tertiary dark:text-dark-text-tertiary blue:text-blue-text-tertiary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary focus:outline-none focus:ring-2 focus:ring-accent-color transition-colors duration-300"
          >
            <Menu v-if="!sidebarOpen" class="h-6 w-6" />
            <Close v-else class="h-6 w-6" />
          </button>
          <div class="flex-shrink-0 flex items-center ml-4">
            <h1 class="text-xl font-semibold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">新易访内网系统</h1>
          </div>
        </div>

        <!-- 右侧：用户信息 -->
        <div class="flex items-center">
          <div class="user-info" v-if="userInfo">
            <ElDropdown placement="bottom-end" @command="handleDropdownCommand">
              <div
                class="user-dropdown-trigger flex items-center gap-3 p-2 rounded-lg hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary cursor-pointer transition-colors duration-300"
              >
                <div class="user-avatar w-8 h-8 bg-accent-color rounded-full flex items-center justify-center">
                  <div class="avatar-placeholder text-white font-semibold text-sm">
                    {{ userInfo.name?.charAt(0) || "用" }}
                  </div>
                </div>
                <div class="user-details hidden md:flex flex-col">
                  <span class="username text-sm font-medium text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">{{
                    userInfo.name
                  }}</span>
                  <span class="user-role text-xs text-light-text-tertiary dark:text-dark-text-tertiary blue:text-blue-text-tertiary">{{
                    userRoleText
                  }}</span>
                </div>
              </div>

              <template #dropdown>
                <ElDropdownMenu class="min-w-64 rounded-lg shadow-lg border border-light-border dark:border-dark-border blue:border-blue-border">
                  <!-- 用户资料部分 -->
                  <div
                    class="p-4 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-b border-light-border dark:border-dark-border blue:border-blue-border"
                  >
                    <div class="flex items-center gap-3">
                      <div
                        class="w-12 h-12 bg-accent-color rounded-full flex items-center justify-center"
                      >
                        <div class="text-white font-semibold text-lg">
                          {{ userInfo.name?.charAt(0) || "用" }}
                        </div>
                      </div>
                      <div class="flex-1">
                        <div
                          class="text-sm font-semibold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary"
                        >
                          {{ userInfo.name }}
                        </div>
                        <div class="text-xs text-light-text-tertiary dark:text-dark-text-tertiary blue:text-blue-text-tertiary">
                          {{ userInfo.username }}
                        </div>
                        <div
                          class="text-xs text-light-text-tertiary dark:text-dark-text-tertiary blue:text-blue-text-tertiary"
                          v-if="userInfo.phone"
                        >
                          {{ userInfo.phone }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 主题切换菜单项 -->
                  <div class="p-3 border-b border-light-border dark:border-dark-border blue:border-blue-border">
                    <p class="text-xs font-medium text-light-text-tertiary dark:text-dark-text-tertiary blue:text-blue-text-tertiary mb-2">
                      主题切换
                    </p>
                    <div class="flex gap-2">
                      <button
                        @click="setTheme('light')"
                        :class="[
                          currentTheme === 'light'
                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 blue:bg-blue-200 blue:text-blue-800 border-blue-300'
                            : 'bg-light-bg-secondary text-light-text-secondary dark:bg-dark-bg-secondary dark:text-dark-text-secondary blue:bg-blue-bg-secondary blue:text-blue-text-secondary border-light-border dark:border-dark-border blue:border-blue-border',
                          'flex-1 px-3 py-2 rounded-md text-xs font-medium border hover:opacity-90 transition-all duration-300',
                        ]"
                      >
                        浅色
                      </button>
                      <button
                        @click="setTheme('dark')"
                        :class="[
                          currentTheme === 'dark'
                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 blue:bg-blue-200 blue:text-blue-800 border-blue-300'
                            : 'bg-light-bg-secondary text-light-text-secondary dark:bg-dark-bg-secondary dark:text-dark-text-secondary blue:bg-blue-bg-secondary blue:text-blue-text-secondary border-light-border dark:border-dark-border blue:border-blue-border',
                          'flex-1 px-3 py-2 rounded-md text-xs font-medium border hover:opacity-90 transition-all duration-300',
                        ]"
                      >
                        深色
                      </button>
                      <button
                        @click="setTheme('blue')"
                        :class="[
                          currentTheme === 'blue'
                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 blue:bg-blue-200 blue:text-blue-800 border-blue-300'
                            : 'bg-light-bg-secondary text-light-text-secondary dark:bg-dark-bg-secondary dark:text-dark-text-secondary blue:bg-blue-bg-secondary blue:text-blue-text-secondary border-light-border dark:border-dark-border blue:border-blue-border',
                          'flex-1 px-3 py-2 rounded-md text-xs font-medium border hover:opacity-90 transition-all duration-300',
                        ]"
                      >
                        蓝色
                      </button>
                    </div>
                  </div>

                  <!-- 功能菜单项 -->
                  <ElDropdownItem command="profile" class="p-3 text-sm text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary transition-colors duration-300">
                    <el-icon class="mr-2">
                      <User />
                    </el-icon>
                    <span>用户资料</span>
                  </ElDropdownItem>

                  <ElDropdownItem command="password" class="p-3 text-sm text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary transition-colors duration-300">
                    <el-icon class="mr-2">
                      <Key />
                    </el-icon>
                    <span>修改密码</span>
                  </ElDropdownItem>

                  <el-divider class="m-0 border-light-border dark:border-dark-border blue:border-blue-border" />

                  <ElDropdownItem command="logout" class="p-3 text-sm text-red-600 dark:text-red-400 blue:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 blue:hover:bg-red-100 transition-colors duration-300">
                    <el-icon class="mr-2">
                      <ArrowRight />
                    </el-icon>
                    <span>退出登录</span>
                  </ElDropdownItem>
                </ElDropdownMenu>
              </template>
            </ElDropdown>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="app-main flex min-h-screen pt-16">
      <!-- 侧边栏 -->
      <aside
        :class="[
          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
          'app-sidebar fixed inset-y-0 left-0 top-16 z-40 w-64 bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary shadow-lg border-r border-light-border dark:border-dark-border blue:border-blue-border transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static overflow-y-auto'
        ]"
      >
        <div class="pt-4 pb-4 h-full">
          <nav class="sidebar-nav">
            <router-link
              to="/"
              class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
              exact
            >
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </router-link>

            <!-- 管理员路由 -->
            <template v-if="userRole === 'admin'">
              <router-link
                to="/admin"
                class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
                exact
              >
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </router-link>
            </template>

            <!-- 守卫路由 -->
            <template v-if="userRole === 'guard'">
              <router-link
                to="/"
                class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
                exact
              >
                <el-icon><HomeFilled /></el-icon>
                <span>仪表盘</span>
              </router-link>
              <router-link
                to="/qrcode-verification"
                class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
                exact
              >
                <el-icon><View /></el-icon>
                <span>二维码验证</span>
              </router-link>
              <router-link
                to="/todays-records"
                class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
                exact
              >
                <el-icon><Document /></el-icon>
                <span>今日记录查询</span>
              </router-link>
            </template>

            <!-- 超级管理员路由 -->
            <template v-if="userRole === 'super-admin'">
              <router-link
                to="/super-admin"
                class="nav-item flex items-center gap-3 px-6 py-3 text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary blue:hover:bg-blue-bg-tertiary border-l-4 border-transparent hover:border-accent-color transition-all duration-300"
                exact
              >
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </router-link>
            </template>
          </nav>
        </div>
      </aside>

      <!-- 遮罩层 -->
      <div
        v-if="sidebarOpen"
        class="fixed inset-0 bg-gray-600 bg-opacity-75 z-30 lg:hidden"
        @click="sidebarOpen = false"
      />

      <!-- 内容区域 -->
      <div class="content-wrapper flex-1 lg:ml-0 min-h-screen bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary transition-colors duration-300">
        <div class="py-6 px-4 sm:px-6 lg:px-8">
          <router-view />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useAuthStore } from "../../stores/auth";
import { useThemeStore, type ThemeType } from "../../stores/theme";
import {
  HomeFilled,
  Setting,
  User,
  Key,
  ArrowRight,
  View,
  Document,
  Menu,
  Close,
} from "@element-plus/icons-vue";
import { ElMessage, ElDropdown, ElDropdownMenu, ElDropdownItem, ElDivider } from "element-plus";
import router from "../../router";

// 使用auth store
const authStore = useAuthStore();
const themeStore = useThemeStore();

const sidebarOpen = ref(false);

// 计算属性
const userInfo = computed(() => authStore.userInfo);
const userRole = computed(() => authStore.getUserRole);
const currentTheme = computed(() => themeStore.currentTheme);

// 获取角色文本
const userRoleText = computed(() => {
  const roleMap: Record<string, string> = {
    guard: "守卫",
    admin: "管理员",
    "super-admin": "超级管理员",
  };
  return roleMap[userRole.value] || "未知角色";
});

// 处理下拉菜单命令
const handleDropdownCommand = (command: string) => {
  switch (command) {
    case "profile":
      handleUserProfile();
      break;
    case "password":
      handlePasswordChange();
      break;
    case "logout":
      handleLogout();
      break;
    default:
      break;
  }
};

// 设置主题
const setTheme = (theme: ThemeType) => {
  themeStore.setTheme(theme);
  const themeNames = {
    light: "浅色",
    dark: "暗色",
    blue: "蓝色",
  };
  ElMessage.success(`已切换到${themeNames[theme]}主题`);
};

// 退出登录处理
const handleLogout = () => {
  authStore.logout();
  ElMessage.success("退出登录成功");
  router.push("/login");
};

// 修改密码
const handlePasswordChange = () => {
  ElMessage.info("密码修改功能将在下一版本实现");
};

// 处理用户资料查看
const handleUserProfile = () => {
  ElMessage.info("用户资料功能将在下一版本实现");
};

// 组件挂载时获取用户信息和初始化主题
onMounted(() => {
  if (authStore.isAuthenticated && !authStore.userInfo) {
    authStore.fetchUserInfo();
  }

  // 初始化主题
  themeStore.initTheme();
});
</script>

<style scoped>
/* 组件特定的样式，已通过Tailwind类实现大部分样式需求 */
* {
  box-sizing: border-box;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 侧边栏滚动条样式 */
.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 3px;
}

.app-sidebar:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-hover);
}

/* 用户菜单下拉列表主题样式 */
:deep(.el-dropdown-menu) {
  --el-dropdown-menu-bg-color: var(--bg-primary);
  --el-dropdown-menu-border-color: var(--border);
  --el-dropdown-menu-text-color: var(--text-primary);
  --el-dropdown-menu-hover-bg-color: var(--bg-tertiary);
  --el-dropdown-menu-active-bg-color: var(--bg-tertiary);
}

/* 用户菜单分隔线样式 */
:deep(.el-divider) {
  background-color: var(--border);
}

/* 遮罩层样式 */
.fixed.inset-0.bg-gray-600.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>